<script setup>
  import {ref} from "vue"
  // 内容渲染指令
  // v-html会解析字符串中的html标签，并将解析后的内容进行渲染
  // v-text会直接将字符串原模原样地展示到页面是，不会对字符串内容进行解析
  // const htmlStr = "<h3>这是一段带有标签html标签的内容</h3>" 

  // 属性绑定指令 v-bind，可以简写为：
  // const baiduURL = "https://www.baidu.com"
  // const Pid = "user"

  // 事件绑定指令 v-on，简写为@
  // 事件绑定指令有三种写法：
  // 第一种：若是执行的代码只有一行，那么我们就可以绑定内联代码，也就是说，直接绑定执行代码即可
  // 第二种：无参处理函数
  const count = ref(0)

  const increase = () => {
    count.value ++
  }
  // 第三种：有参处理函数
  const add = (n) => {
    count.value += n
  }

  // 条件渲染指令
  // 分为两种，分别是v-show指令 和 v-if 指令
  // 区别：v-show是通过控制标签css样式的display属性，从而控制元素是显示还是隐藏的
  //       v-if则是通过创建并插入DOM元素进行显示，删除DOM元素进行删除
  // 因此，当我们需要频繁地控制元素显示或隐藏时，就需要使用v-show，若是使用v-if
  // 则会造成性能开销
  const bool = ref(true) 


</script>

<template>
  <div> 
    <!-- <p v-html="htmlStr"></p>
    <p v-text="htmlStr"></p> -->

    <!-- <a v-bind:href="baiduURL">点击此处，跳转百度</a>
    <p :id="Pid">这是一段p标签内容</p> -->

    <p>年龄：{{ count }}</p>
    <button v-on:click="count++">年龄+1</button>
    <button @click="increase">年龄+1</button>
    <button @click="add(3)">年龄+3</button><br><br>
    <hr>

    <button @click="bool = !bool">显示/隐藏</button>
    <div class="box box-1" v-if="!bool"></div>
    <div class="box box-2" v-else></div>


  </div>
</template>

<style scoped>
  #user {
    color: red;
  }

  .box {
    width: 400px;
    height: 400px;
    margin: 2px;
  }
  .box-1 {
    background-color: red;
  }
  .box-2 {
    background-color: green;
  }
</style>